<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>时间线</title>
	</head>
	<body>
		<div style="width:100px;height:100px;background-color:red"></div>
		<script type="text/javascript">
			/*
			 * 时间线
			 * 1.document.readyState = 'loading'
			 * 2.遇到css，创建线加载，解析
			 * 3.遇到script,没有异步，阻塞
			 * 4.加载异步脚本
			 * 5.遇到img,正常解析
			 * 6.解析完成，document.readyState = 'interactive'
			 * 7.文档解析完成，所有设置defer出生顺序执行
			 * 8.DoMContentLoaded
			 * 9.document.readyState = 'complete'
			 */
			console.log(document.readyState);//loading
			window.onload = function(){
				console.log(document.readyState);//complete
			}
			
			document.onreadystatechange = function(){
				console.log(document.readyState)
			}
//			document.domContentLoadedEventEnd = function(){
//				console.log('a');
//			}
			//解析完成后执行相当于</body>上写script
			document.addEventListener('DOMContentLoaded',function(){
				console.log('a');
			},false);
			
			
		</script>
	</body>
</html>
